<template>
    <div class="innerCommon">
        <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item 
                v-for="(item,index) in location" 
                :key="index"
                @click.native="toLink(item.path)"
            >{{item.name}}</a-breadcrumb-item>
        </a-breadcrumb>
        <div class="content">
            <div class="wrapHeader">
                <div class="left">
                    <slot name="left"></slot>
                </div>
                <div class="right">
                    <slot name="right"></slot>
                </div>
            </div>
            <div class="table">
                <slot name="table"></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"innerCommon",
    props:{
        location:Array
    },
    methods:{
        toLink(data){
            if(data){
                this.$router.push({path:data})
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
.innerCommon
    min-height:100%;
    height:100%;
    .content
        min-height:calc(100% - 53px);
        background:#fff;
        padding-bottom:50px;
        .wrapHeader
            display:flex;
            justify-content:space-between;
            height:60px;
            border-bottom:1px solid #ddd;
            padding:0 20px;
            align-items:center;
            .left
                display:flex;
                justify-content:space-between;
                align-items:center;
                span 
                    display:inline-block;
                    margin-right:10px;
        .table
            padding:20px;
            min-height:calc(100% - 113px);
</style>